<template>
    <div class="text-effect">
        <div :data-text="text" class="text-box">
            {{ text }}
        </div>
    </div>
</template>

<script>
export default {
    props: {
        text: {
            type: String,
            default: 'Hello World'
        },
    }
}
</script>

<style lang="less" scoped>
@keyframes light {
    0% {background-position: 0 0; }
    100% {
        background-position: -100% 0;
    }
}
.text-effect {
    
    .text-box {
        -webkit-text-fill-color: transparent;
        background-size: 200% 100%;
        -webkit-background-clip: text;
        animation: light 3s infinite linear;
        background-image: -webkit-linear-gradient(left, blue, red 25%, blue 50%, red 75%, blue 100%);
    }
}
</style>